<style>
.ddpro-details-box {
    display: flex;
}
.ddpro-details-box.ddpro-details-row-reverse {
    flex-flow: row-reverse;
}
.ddpro-details-right {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 20px 80px;
    width: 50%;
}
.ddpro-details-left {
    width: 50%;
    font-size: 0;
}
.ddprod-video-icon video.ddprod-video {
    max-width: 100%;
}
.ddpro-details-header {
    height: 50px;
    font-size: 16px;
    color: #000;
    display: none;
    justify-content: left;
    align-items: center;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;    
    background: #fafafa;
}

.ddprod-title {
    font-size: 22px;
    color: #000;
    font-family: Avenir, sans-serif;
    font-weight: 500;
    line-height: 1;
    margin-bottom: 25px;
}
.ddprod-text {
    color: #000;
    line-height: 1.5;
    font-size: 14px;
}
.ddprod-icon {
    font-size: 0;
    margin: 30px 0;
}
.ddprod-buttom {
    font-size: 12px;
    color: #000;
}
.ddprod-video-text {
    line-height: 1.3;
    color: #666;
    font-size: 14px;
    margin-bottom: 40px;
}
.ddprod-video-describe {
    font-size: 16px;
    color: #000;
    letter-spacing: 0;
    line-height: 1.3;
    margin-bottom: 40px;
    font-family: math;
    position: relative;
}
span.ddpicon-left {
    font-size: 30px;
    position: absolute;
    left: -20px;
    top: -10px;
    line-height: 1;
}
span.ddpicon-right {
    font-size: 30px;
    position: absolute;
    right: -15px;
    bottom: -40px;
    line-height: 1;
}
.ddprod-video-link {
    text-align: left;
    margin-bottom: 20px;
}
a.ddprod-url {
    display: inline-block;
    text-decoration: underline;
}
@media(max-width:768px){
.ddpro-details-header {
    display: flex;
}
.ddpro-details-box {
    display: none;
}
.ddpro-details-header.open~.ddpro-details-box {
    display: flex;
    flex-flow: column;
    padding: 20px;
}
.ddpro-details-header.open~.ddpro-details-box.ddpro-details-row-reverse {
    flex-flow: column-reverse;
}
.ddpro-details-header.open {
    box-shadow: 0 5px 7px 0 rgba(0, 0, 0, .15);
}
.ddpro-details-left, .ddpro-details-right {
    width: 100%;
}
.ddpro-details-right {
    padding: 20px 0px;
}
.ddprod-title {
    margin-bottom: 15px;
}
span.ddpicon-left {
    left: 0px;
    top: -20px;
}
span.ddpicon-right {
    right: 0px;
    bottom: -35px;
}
}
</style>
 
<div class="ddpro-details-main">
    {% for block in section.blocks %}

    {% if block.type == 'style1' %}
    <div class="ddpro-details-item ddpro-details-style1" style="background: {{ block.settings.bg }};">
        <div class="ddpro-details-header">{{ block.settings.bb_title }}</div>
        <div class="ddpro-details-box {% if block.settings.overturn %}ddpro-details-row-reverse{%endif%}">
            <div class="ddpro-details-left">
              <img class="ddpro-details-picture" src="{{ block.settings.image | img_url: 'master' }}">
            </div>
            <div class="ddpro-details-right">
              <div class="ddprod-box">
                  <div class="ddprod-title">{{ block.settings.ctitle }}</div>
                  <div class="ddprod-text">{{ block.settings.ctext }}</div>
                  <div class="ddprod-icon">
                      <img class="ddprod-picture" src="{{ block.settings.image_icon | img_url: 'master' }}">
                  </div>
                  <div class="ddprod-buttom">{{ block.settings.rctext }}</div>
              </div>
            </div>
        </div>
    </div>
    {%endif%}

    {% if block.type == 'style2' %}
    <div class="ddpro-details-item ddpro-details-style2" style="background: {{ block.settings.bg }};">
        <div class="ddpro-details-header">{{ block.settings.bb_title }}</div>
        <div class="ddpro-details-box {% if block.settings.overturn %}ddpro-details-row-reverse{%endif%}">
            <div class="ddpro-details-left">
              <img class="ddpro-details-picture" src="{{ block.settings.image | img_url: 'master' }}">
            </div>
            <div class="ddpro-details-right">
              <div class="ddprod-box">
                  <div class="ddprod-title">{{ block.settings.ctitle }}</div>
                  <div class="ddprod-video-text">{{ block.settings.ctext }}</div>
                  <div class="ddprod-video-describe">
                      <span class="ddpicon-left">“</span>
                      {{ block.settings.text_content }}
                      <span class="ddpicon-right">”</span>
                  </div>
                  <div class="ddprod-video-link">
                      <a href="{{ block.settings.link_url }}" class="ddprod-url">{{ block.settings.link_text }}</a>
                  </div>
                  <div class="ddprod-video-icon">
                      <video playsinline="playsinline" autoplay="autoplay" loop="loop" muted="muted" class="ddprod-video" poster="">
                          <source src="{{block.settings.video.sources[1].url}}" type="video/mp4" />
                      </video>
                  </div>
              </div>
            </div>
        </div>
    </div>
    {%endif%}

    {%endfor %}
</div>

<script>
$(function(){
  $(".ddpro-details-header").eq(0).addClass("open");
  
});
$(document).on("click",".ddpro-details-header",function(){
    if(!$(this).hasClass('open')){
      $(this).addClass('open');
    }else{
      $(this).removeClass('open');
    } 
    if(window.ddproswiper){
      window.ddproswiper.update();
    }
});
 
</script>
{% schema %}
{
  "name": "产品页 - 产品详情",  
  "class":"ddpro-details",
  "settings": [
 
  ],
  "blocks": [
    {
      "type": "style1",
      "name": "图文样式",
      "settings": [
        {
          "type": "color",
          "id": "bg",
          "label": "背景颜色",
          "default": "#fff"
        },
        {
          "type": "checkbox",
          "id": "overturn",
          "label": "开启翻转",
          "default": false
        },
        {
          "type": "text",
          "id": "bb_title",
          "label": "标题"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "模块主图"
        },
  	    {
          "type": "textarea",
          "id": "ctitle",
          "label": "描述标题"
        },
  	    {
          "type": "richtext",
          "id": "ctext",
          "label": "描述文案"
        },
        {
          "type": "image_picker",
          "id": "image_icon",
          "label": "描述图片"
        },
  	    {
          "type": "richtext",
          "id": "rctext",
          "label": "图片下方文案"
        }
      ]
    },
    {
      "type": "style2",
      "name": "视频样式",
      "settings": [
        {
          "type": "color",
          "id": "bg",
          "label": "背景颜色",
          "default": "#fff"
        },
        {
          "type": "checkbox",
          "id": "overturn",
          "label": "开启翻转",
          "default": false
        },
        {
          "type": "text",
          "id": "bb_title",
          "label": "标题"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "模块主图"
        },
  	    {
          "type": "textarea",
          "id": "ctitle",
          "label": "描述标题"
        },
  	    {
          "type": "richtext",
          "id": "ctext",
          "label": "标题下方描述"
        },
  	    {
          "type": "textarea",
          "id": "text_content",
          "label": "描述文案"
        },
  	    {
          "type": "text",
          "id": "link_text",
          "label": "链接文案"
        },
  	    {
          "type": "url",
          "id": "link_url",
          "label": "链接"
        },
        {
           "type":"video",
           "id":"video",
           "label":"视频"
        }
      ]
    }
  ]
}
{% endschema %}

